package com.sy.musicapp.ui.home

import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.rounded.Clear
import androidx.compose.material.icons.rounded.Delete
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.accompanist.insets.navigationBarsPadding
import com.sy.musicapp.model.Music
import com.sy.musicapp.model.MusicViewModel
import com.sy.musicapp.ui.common.MusicListItem
import com.sy.musicapp.ui.common.MyDrawer
import com.sy.musicapp.ui.theme.Global
import com.sy.musicapp.ui.theme.MusicAppTheme

/**
 * 歌曲列表模态框
 * @author SY
 * @since 2022-02-13 20:36
 **/
@ExperimentalAnimationApi
@Composable
fun MusicListDrawer(
    musicModel: MusicViewModel
) {
    val visible by musicModel.isMusicListShow.collectAsState()
    val currentIndex by musicModel.currentMusicIndex.collectAsState()
    val currentPlay: Music by musicModel.currentMusic.collectAsState()
    val musicList by musicModel.musicList.collectAsState()

Box(modifier = Modifier.navigationBarsPadding()){

    MyDrawer(visible = visible) {
        Column(modifier = Modifier.padding(vertical = 10.dp)) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth(1f)
            ) {
                Text(
                    text = "播放列表",
                    modifier = Modifier.padding(horizontal = 15.dp),
                    fontSize = 16.sp,
                    fontWeight = FontWeight.ExtraBold,
                    color = Global.colors.secondary
                )
                IconButton(onClick = {
                    musicModel.musicList.value = emptyList()
                }) {
                    Icon(
                        imageVector = Icons.Rounded.Delete,
                        contentDescription = "delete",
                        tint = Global.colors.onPrimary
                    )
                }
            }
            val listState = rememberLazyListState()
            LaunchedEffect(Unit) {
                if (currentIndex == -1) {
                    listState.scrollToItem(0)
                } else {
                    listState.scrollToItem(currentIndex)
                }
            }

            LazyColumn(
                contentPadding = PaddingValues(vertical = 10.dp),
                verticalArrangement = Arrangement.spacedBy(0.dp),
                state = listState
            ) {
                itemsIndexed(
                    musicList,
                    { index: Int, _: Music -> index }
                ) { index, item ->
                    val color = if (currentPlay.id == item.id)
                        Color.Black.copy(0.1f)
                    else
                        Color.Transparent
                    Row(
                        modifier = Modifier
                            .background(color = color)
                            .padding(horizontal = 10.dp, vertical = 5.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Text(text = "${index + 1}. ", color = Global.colors.onBackground)
                        MusicListItem(
                            music = item,
                            icon = Icons.Rounded.Clear,
                            action = currentPlay,
                            isShowImgOnDefault = currentPlay.id == item.id,
                            imgShape = CircleShape,
                            itemClick = {
                                musicModel.start(index)
                            },
                            itemIconClick = {
                                musicModel.delFromMusicList(index)
                            },
                        )
                    }
                }
            }
        }
    }
}
}


@ExperimentalAnimationApi
@ExperimentalMaterialApi
@Preview(showSystemUi = true)
@Composable
fun MusicListDrawerPrev() {
    MusicAppTheme {
//        MusicListDrawer(MusicViewModel()){}
    }
}

@ExperimentalAnimationApi
@ExperimentalMaterialApi
@Preview(showSystemUi = true)
@Composable
fun MusicListDrawerPrevDark() {
    MusicAppTheme(darkTheme = true) {
//        MusicListDrawer(MusicViewModel()){}
    }
}